<template>
  <div class="layout-admin">
    <!-- 导航栏 -->
    <header>
      <div class="fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
          <div class="flex items-center">
            <div class="text-2xl font-bold text-primary mr-1">狂速科技</div>
          </div>

          <!-- 桌面导航 -->
          <nav class="hidden md:flex space-x-8">
            <nuxt-link to="/#hero" class="text-white hover:text-primary transition-colors">首页</nuxt-link>
            <nuxt-link to="/#solutions" class="text-white hover:text-primary transition-colors">解决方案
            </nuxt-link>
            <nuxt-link to="/#features" class="text-white hover:text-primary transition-colors">产品特性
            </nuxt-link>
            <nuxt-link to="/#pricing" class="text-white hover:text-primary transition-colors">套餐价格</nuxt-link>
            <nuxt-link to="/#about" class="text-white hover:text-primary transition-colors">关于我们</nuxt-link>
            <nuxt-link to="/#contact" class="text-white hover:text-primary transition-colors">联系我们</nuxt-link>
          </nav>
          <!-- 移动端菜单按钮 -->
          <button class="md:hidden text-white text-2xl" id="menu-toggle">
            <i class="fa fa-bars"></i>
          </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div
            class="md:hidden bg-card absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 pointer-events-none"
            id="mobile-menu">
          <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
            <a href="#hero" class="text-white hover:text-primary transition-colors py-2">首页</a>
            <a href="#solutions" class="text-white hover:text-primary transition-colors py-2">解决方案</a>
            <a href="#features" class="text-white hover:text-primary transition-colors py-2">产品特性</a>
            <a href="#pricing" class="text-white hover:text-primary transition-colors py-2">套餐价格</a>
            <a href="#about" class="text-white hover:text-primary transition-colors py-2">关于我们</a>
            <a href="#contact" class="text-white hover:text-primary transition-colors py-2">联系我们</a>
          </div>
        </div>
      </div>
    </header>
    <div>
      <nuxt/>
    </div>
    <!-- 页脚 -->
    <footer class="bg-dark border-t border-gray-800 py-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div>
            <div class="text-2xl font-bold text-primary mb-4">狂速科技SAAS</div>
            <p class="text-gray-400 mb-6">
              智能小程序解决方案提供商，助力企业快速搭建数字化业务平台
            </p>
            <div class="flex space-x-4">
              <a href=" " class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-weixin"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-weibo"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                <i class="fa fa-qq"></i>
              </a>
            </div>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-4">产品中心</h4>
            <ul class="space-y-2">
              <li>
                <nuxt-link to="/ecommerce" class="text-gray-400 hover:text-primary transition-colors">
                  电商解决方案
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/service" class="text-gray-400 hover:text-primary transition-colors">
                  服务预约解决方案
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/education" class="text-gray-400 hover:text-primary transition-colors">
                  教育解决方案
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/restaurant" class="text-gray-400 hover:text-primary transition-colors">
                  餐饮解决方案
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/hotel" class="text-gray-400 hover:text-primary transition-colors">
                  酒店解决方案
                </nuxt-link>
              </li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-4">帮助中心</h4>
            <ul class="space-y-2">
              <li>
                <nuxt-link to="/frequently" class="text-gray-400 hover:text-primary transition-colors">
                  常见问题
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/tutorial" class="text-gray-400 hover:text-primary transition-colors">
                  使用教程
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/changelog" class="text-gray-400 hover:text-primary transition-colors">
                  更新日志
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/support" class="text-gray-400 hover:text-primary transition-colors">技术支持
                </nuxt-link>
              </li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-4">公司信息</h4>
            <ul class="space-y-2">
              <li>
                <nuxt-link to="/about" class="text-gray-400 hover:text-primary transition-colors">关于我们
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/company" class="text-gray-400 hover:text-primary transition-colors">新闻动态
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/partners" class="text-gray-400 hover:text-primary transition-colors">
                  合作伙伴
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/join" class="text-gray-400 hover:text-primary transition-colors">招贤纳士
                </nuxt-link>
              </li>
              <li>
                <nuxt-link to="/contact" class="text-gray-400 hover:text-primary transition-colors">联系我们
                </nuxt-link>
              </li>
            </ul>
          </div>
        </div>

        <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p class="text-gray-500 text-sm mb-4 md:mb-0">
            © 2025 狂速科技科技 All Rights Reserved
          </p>
          <div class="flex space-x-6">
            <nuxt-link to="/privacy" class="text-gray-500 hover:text-primary text-sm transition-colors">
              隐私政策
            </nuxt-link>
            <nuxt-link to="/terms" class="text-gray-500 hover:text-primary text-sm transition-colors">
              服务条款
            </nuxt-link>
            <nuxt-link to="/legal" class="text-gray-500 hover:text-primary text-sm transition-colors">
              法律声明
            </nuxt-link>
          </div>
        </div>
      </div>
    </footer>
    <!-- 回到顶部按钮 -->
    <button @click="scrollToTop" id="back-to-top"
            class="fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
      <i class="fa fa-chevron-up"></i>
    </button>

  </div>
</template>

<script>

export default {
  layout: "default",
  name: "layout-view",
  data() {
    return {
      activeMenu: '',
      navbar: null,
      backToTop: null
    }
  },
  mounted() {
    this.navbar = document.getElementById('navbar');
    this.backToTop = document.getElementById('back-to-top');
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  watch: {
    '$route'(to) {
      // 当路由变化时检查是否有hash，有则滚动到对应位置
      if (to.hash) {
        setTimeout(() => {
          const element = document.querySelector(to.hash);
          if (element) {
            window.scrollTo({
              top: element.offsetTop - 80,
              behavior: 'smooth'
            });
          }
        }, 100);
      }
    },
  },
  methods: {

    handleScroll() {
      if (window.scrollY > 100) {
        this.navbar.classList.add('bg-dark/90', 'backdrop-blur-md', 'shadow-lg');
        this.navbar.classList.remove('py-4');
        this.navbar.classList.add('py-2');

        this.backToTop.classList.remove('opacity-0', 'invisible');
        this.backToTop.classList.add('opacity-100', 'visible');
      } else {
        this.navbar.classList.remove('bg-dark/90', 'backdrop-blur-md', 'shadow-lg');
        this.navbar.classList.add('py-4');
        this.navbar.classList.remove('py-2');

        this.backToTop.classList.add('opacity-0', 'invisible');
        this.backToTop.classList.remove('opacity-100', 'visible');
      }
    },
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
      const mobileMenu = document.getElementById('mobile-menu');
      if (this.isMobileMenuOpen) {
        mobileMenu.classList.remove('opacity-0', '-translate-y-full', 'pointer-events-none');
        mobileMenu.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');
      } else {
        mobileMenu.classList.add('opacity-0', '-translate-y-full', 'pointer-events-none');
        mobileMenu.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
      }
    },
    handleSmoothScroll(e) {
      e.preventDefault();
      if (this.isMobileMenuOpen) {
        this.toggleMobileMenu();
      }

      const targetId = e.currentTarget.getAttribute('href');
      if (targetId === '#') return;

      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    },
    scrollToHash(hash) {
      if (hash) {
        setTimeout(() => {
          const element = document.querySelector(hash);
          if (element) {
            const offset = 80; // 与导航栏高度相同
            const elementPosition = element.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - offset;

            window.scrollTo({
              top: offsetPosition,
              behavior: 'smooth'
            });
          }
        }, 100);
      }
    },
  }
}
</script>

<style>

</style>
